import React, { memo } from 'react';
// import { Rating } from '@mui/material'
import Rating from '@mui/material/Rating';
import { ItemWrapper } from '@/components/room-item/style'

const RoomItem = memo((props) => {
  const {itemData, itemWidth = '25%'} = props;

  return (
    <ItemWrapper verifycolor={ itemData?.verify_info?.text_color || "#36576a" } itemwidth={ itemWidth }>
      <div className="inner">
        <div className="cover">
          <img src={ itemData.picture_url } alt=""/>
        </div>
        <div className="desc">
          { itemData.verify_info.messages.join(' · ') }
        </div>
        <div className="name">
          { itemData.name }
        </div>
        <div className="price">
          ￥{ itemData.price }/晚
        </div>
        <div className="bottom">
          <Rating value={ itemData.star_rating ?? 5 } precision={ 0.1 }
                  readOnly sx={ {fontSize: "12px", color: "#00848a", marginRight: '-1px'} }>
            <span className="count">{ itemData.reviews_count }</span>
            {
              itemData.bottom_info && <span className="extra">{ itemData.bottom_info.content }</span>
            }
          </Rating>
        </div>

      </div>
    </ItemWrapper>
  );
});

export default RoomItem;
